<template>
  <div>
    <van-nav-bar title="评分" left-arrow @click-left="topfan" />
    <div class="title">
      <img src="../../assets/images/订单信息-服务评价.png" width="20" alt="" />
      <span>订单信息</span>
    </div>
    <div class="title-top">
      <ul>
        <li>
          <div>商品</div>
          <span>{{ item.prodName }}</span>
        </li>
        <li>
          <div>发货时间</div>
          <span>{{ item.sendTime }}</span>
        </li>
        <li>
          <div>到达时间</div>
          <span>{{ item.receiveTime }}</span>
        </li>
      </ul>
    </div>
    <div class="title">
      <img src="../../assets/images/订单信息-服务评价.png" width="20" alt="" />
      <span>服务评价</span>
    </div>
    <div class="title-bottom">
      <ul>
        <li>
          <div>描述相符</div>
          <van-rate
            v-model="describeVal"
            :size="30"
            color="#ffcf60"
            void-icon="star"
            void-color="#eee"
          />
        </li>
        <li>
          <div>物流速度</div>
          <van-rate
            v-model="suduVal"
            :size="30"
            color="#ff8d5b"
            void-icon="star"
            void-color="#eee"
          />
        </li>
        <li>
          <div>服务质量</div>
          <van-rate
            v-model="serverVal"
            :size="30"
            color="#ff5d5e"
            void-icon="star"
            void-color="#eee"
          />
        </li>
      </ul>
    </div>
    <div style="position: relative">
      <textarea
        rows="4"
        class="textarea"
        v-model="comment"
        placeholder="请填写评价"
      ></textarea>
      
      </div>
    <button class="btn" @click="tijiaoClick"  v-show="showpltbn==true">提交评论</button>
  </div>
</template>

<script>
import { tijiao,cankan } from "../../request/api";
export default {
  data() {
    return {
      //商品描述相符评分
      describeVal:5,
      //物流速度评分
      suduVal:3,
      // 服务质量评分
      serverVal: 2,
      item: [],
      //订单号
      serialNo: "",
      // 评价描述
      comment: "",
      showpltbn:true
    };
  },
  created() {
    this.item = this.$route.query.item;
    // console.log(this.item);
    this.showpltbn = this.$route.query.showpltbn;
    if(this.showpltbn==false){
      cankan({
        serialNo:this.item.serialNo
      }).then(res=>{
      this.describeVal=res.data.prodConformityPoint
      this.suduVal=res.data.logisticsSpeedPoint
      this.serverVal=res.data.serviceQualityPoint
      this.comment=res.data.comment
      return
      })
    }
  },
  methods: {
    topfan() {
      this.$router.push("/deliverGoods");
    },
    tijiaoClick() {
      this.serialNo = this.item.serialNo;
      // console.log(this.serialNo);
      
      tijiao({
        serialNo:this.serialNo,
        prodConformityPoint:this.describeVal,
        logisticsSpeedPoint:this.suduVal,
        serviceQualityPoint:this.serverVal,
        comment:this.comment
      }).then((res) => {
        console.log(res);
        if(res.errCode==0){
          this.comment=''
         
        }
      });
      }
  
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar__content {
  background: #003399;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
}
.title {
  background-color: #f5fafe;
  color: #003398;
  padding: 15px 10px;
  display: flex;
  align-items: center;
  img {
    margin-right: 10px;
  }
}
.title-top {
  background-color: #fff;
  margin-bottom: 10px;
  ul {
    li {
      display: flex;
      align-items: center;
      padding: 10px;
      div {
        width: 64px;
        margin-right: 25px;
        color: #999;
      }
      span {
        color: #999;
      }
    }
  }
}
.title-bottom {
  background-color: #fff;
  ul {
    li {
      display: flex;
      align-items: center;
      padding: 10px;
      div {
        margin-right: 50px;
      }
    }
  }
}

.textarea {
  border: 0;
  resize: none;
  width: 100%;
  background-color: #fff;
  height: 200px;
  position: relative;
  margin-top: 10px;
  box-sizing: border-box;
}
.note {
  position: absolute;
  top: 0;
  line-height: 20px;
  padding: 14px 5px;
}
.btn {
  border: 0;
  background-color: #003399;
  width: 90%;
  height: 40px;
  margin: 10px 17px 10px;
  border-radius: 20px;
  color: #fff;
}
</style>